<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <ViewLog ref="log_ref"/>
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">{{account_name}}</span>
            <div class="flexbox flexcenter">
                <div class="font_14 color_03">获取日志状态：
                    <el-link type="info" :underline="false" v-if="status==0">等待执行</el-link>
                    <el-link type="warning" :underline="false" v-else-if="status==1">执行中</el-link>
                    <el-link type="danger" :underline="false" v-else-if="status==2">执行失败</el-link>
                    <el-link type="success" :underline="false" v-else-if="status==3">执行完毕</el-link>
                </div>
                <el-date-picker style="width:240px;margin-left:12px" @change="getDataList(1)" size="small" :clearable="false" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="content_title" label="日志标题" min-width="100">
                </el-table-column>
                <el-table-column prop="object_type" label="操作对象类型" min-width="120">
                </el-table-column>
                <el-table-column prop="object_id" label="操作对象ID" min-width="140">
                </el-table-column>
                <el-table-column prop="object_name" label="操作对象名称" min-width="140">
                </el-table-column>
                <el-table-column prop="operator" label="操作人" min-width="140">
                </el-table-column>
                <el-table-column prop="opt_ip" label="操作 IP" min-width="140">
                </el-table-column>
                <el-table-column prop="create_time" label="操作时间" min-width="150">
                </el-table-column>
                <el-table-column prop="" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="toDettails(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import ViewLog from './ViewLog'
export default {
    name: "",
    data() {
        return {
            loading: false,
            account_name: "",
            queryInfo: {
                page: 1,
                limit: 20,
                date: [],
                advertiser_id: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
            status:null,
        };
    },
    created() {
        this.queryInfo.advertiser_id = this.$route.query.advertiser_id;
        this.account_name = this.$route.query.account_name;
        this.getTimeFn()
        this.getDataList(1);
        this.getStatus()
    },
    methods: {
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            end.setTime(end.getTime());
            that.queryInfo.date[0] = that.formatDate(start);
            that.queryInfo.date[1] = that.formatDate(start);
        },
        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();
            mymonth = mymonth < 10 ? "0" + mymonth : mymonth;
            myweekday = myweekday < 10 ? "0" + myweekday : myweekday;
            return myyear + "-" + mymonth + "-" + myweekday;
        },
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "qcadmin/Qcaccount/advertiserLogs",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        //获取状态
        async getStatus() {
            const { data: res } = await this.$http.post(
                "qcadmin/Qcaccount/advertiserLogstatus",
                {
                    advertiser_id:this.queryInfo.advertiser_id
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.status = res.data.status
            }
        },

        toDettails(row){
            this.$refs.log_ref.getData(row)
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        ViewLog
    },
};
</script>


<style scoped>
.strategy_head {
    height: auto;
    margin-top: 20px;
}
</style>


